<template>
  <view class="popup-page">
    <u-popup :show="showSpecPopup" :round="20" mode="bottom" closeable @close="closePopup">
      <scroll-view scroll-y class="popup-scroll">
        <view class="u-flex u-col-top u-m-b-28" style="align-items: stretch;">
          <image style="width: 200rpx;height: 200rpx;flex-shrink: 0;" :src="goodsForm.subtitle?goodsForm.subtitle.split(',')[0]:''" mode="aspectFill" />
          <view class="u-flex-1 u-p-l-26 u-flex u-flex-column u-row-between u-col-top">
            <view class="u-line-2">{{ goodsForm.title }}</view>
            <view class="u-font-36" style="color: #E20300;font-weight: 500;" v-if="goodsSpecList.length"><text class="u-font-32">¥</text> {{ goodsSpecList[goodsSpecNumber].priceCents / 100 }}</view>
          </view>
        </view>
        <view class="u-font-28 u-m-b-26" style="font-weight: 500;">规格</view>
        <view class="spec-list">
          <view class="spec-item" :class="{active: index==goodsSpecNumber}" @click="checkSpec(index)" v-for="(item, index) in goodsSpecList" :key="index">
            <view class="u-font-28" style="font-weight: 500;">{{ item.skuName }}</view>
            <view class="u-font-24"><text>剩余{{ item.stock }}件</text></view>
          </view>
        </view>
        <view class="u-flex u-row-between u-m-b-40">
          <view class="u-font-28" style="font-weight: 500;">数量</view>
          <u-number-box
            integer
            disabledInput
            :min="1"
            :max="goodsSpecList[goodsSpecNumber].stock"
            v-model="value"
            asyncChange
            @change="numChange"
            button-size="52rpx"
          >
            <text slot="input" style="width: 50px;text-align: center;">{{value}}</text>
          </u-number-box>
        </view>
        <view class="btn" v-if="type == 0 || type == 3" @click="toPay">立即支付</view>
        <view class="btn" v-if="type == 1" @click="addCar">加入购物车</view>
      </scroll-view>
		</u-popup>
  </view>
</template>

<script>
import { addShopCar } from '@/api/index'
import { throttleFunc } from '@/common/util'

export default {
  props: {
    showSpecPopup: {
      type: Boolean,
      default: false,
    },
    closePopup: {
      type: Function,
      default: () => {},
    },
    goodsSpecList: {
      type: Array,
      default: () => [],
    },
    goodsForm: {
      type: Object,
      default: () => {},
    },
    type: {
      type: Number,
      default: () => 0,
    },
  },
  data() {
    return {
      goodsSpecNumber: 0,
      value: 1,
    };
  },
  onLoad() {},
  methods: {
    checkSpec(index) {
      this.goodsSpecNumber = index
      this.value = 1
    },
    numChange(e){
      this.value = e.value
    },
    addCar: throttleFunc(function() {
      const userInfo = uni.getStorageSync('userInfo')
      const that = this
      if(!userInfo.openId) {
        uni.showToast({
          icon: 'none',
          title: `请先绑定微信`
        })
        setTimeout(() => {
          that.jumpTo('/pages/userInfo/userInfo')
        }, 1000)
        return
      }
      const parameter = {
        productId: this.goodsForm.id,
        skuId: this.goodsSpecList[this.goodsSpecNumber].id,
        quantity: this.value
      }
      addShopCar(parameter).then(res => {
        uni.showToast({
          icon: 'none',
          title: '添加成功'
        })
        this.closePopup()
      })
    }),
    toPay: throttleFunc(function() {
      const userInfo = uni.getStorageSync('userInfo')
      const that = this
      if(!userInfo.openId) {
        uni.showToast({
          icon: 'none',
          title: `请先绑定微信`
        })
        setTimeout(() => {
          that.jumpTo('/pages/userInfo/userInfo')
        }, 1000)
        return
      }
      if(userInfo.postId == 103 && this.type == 0) {
        uni.showToast({
          icon: 'none',
          title: '请先开通vip'
        })
        return
      }
      const filterGoodsList = [
        {
          subtitle: this.goodsForm.subtitle,
          title: this.goodsForm.title,
          skuName: this.goodsSpecList[this.goodsSpecNumber].skuName,
          priceCents: this.goodsSpecList[this.goodsSpecNumber].priceCents,
          freightAmount:this.goodsForm.freightAmount,
          quantity: this.value,
        }
      ]
      const shopCarInfo = {
        filterGoodsList,
        goodsNum: 1,
        freightAmount: (filterGoodsList.reduce((total, item) => {
          return total + ((item.freightAmount/100) * item.quantity);
        }, 0)).toFixed(2),
        totalAmount: (filterGoodsList.reduce((total, item) => {
          return total + ((item.priceCents/100) * item.quantity);
        }, 0)).toFixed(2),
        type: 'now',
        quantity: this.value,
        skuId: this.goodsSpecList[this.goodsSpecNumber].id,
      }
      uni.setStorageSync('shopCarInfo', shopCarInfo)
      this.jumpTo('/pages/confirmOrder/confirmOrder')
    }),
  },
};
</script>

<style lang="scss" scoped>
.popup-scroll {
  width: 100%;
  max-height: 80vh;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 70rpx 24rpx 70px;
  .spec-list {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    margin-bottom: 40rpx;
    .spec-item {
      width: 100%;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      border: 2rpx solid #D4D4D4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 36rpx;
      color: #818181;
    }
    .active {
      border: 2rpx solid #56CB03;
      color: #53BE07;
      text {
        color: #333333;
      }
    }
  }
  .btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #56CB03;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #FFFFFF;
    margin-bottom: 20rpx;
  }
}
</style>
